<script setup>
import * as THREE from "three";
import ThreePlus from "../three/index.js";
import { onMounted, ref } from "vue";

let screenDom = ref(null);

onMounted(() => {
let threePlus = new ThreePlus(".canvas-container");
  // threePlus.setWorld();

  window.addEventListener("resize", () => {
    threePlus.renderer.setSize(window.innerWidth, window.innerHeight);
    threePlus.camera.aspect = window.innerWidth / window.innerHeight;
    threePlus.camera.updateProjectionMatrix();
  });

  //添加灯光
  threePlus.setLight();

  // threePlus.addAxes();
});

</script>

<template>
  <div class="home" ref="screenDom">
    <div class="canvas-container"></div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 1920px;
  height: 1080px;
}

.canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(#edab79, #f0a66d);

  canvas {
    display: block;
  }
}

canvas {
  width: 100%;
  height: 100%;
}
</style>